import { Image, Text, TouchableOpacity, View, Alert } from "react-native";
import { router } from "expo-router";
import { DEFAULT_AVATAR_URL } from "@/config/default-value";
import AntDesign from "@expo/vector-icons/AntDesign";
import SettingsList from "@/components/Settings/SettingsList";
import React, { useState } from "react";
import { useUserProfileState } from "@/hooks/user/user-profile";
import { useTheme } from "@/contexts/ThemeContext";
import styles from "./index.style";
import QRCodeModal from "@/components/Global/QRCodeModal";

export default function SettingsPage() {
  const { currentUser } = useUserProfileState();
  const { colors } = useTheme();
  const [qrCodeVisible, setQrCodeVisible] = useState(false);

  const handleShareQRCode = () => {
    Alert.alert("分享", "个人二维码已生成，请选择分享方式");
  };

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <View style={styles.profileWrapper}>
        <View
          style={[
            styles.profileSection,
            {
              backgroundColor: colors.card.background,
              shadowColor: colors.card.shadow,
            },
          ]}
        >
          <TouchableOpacity
            activeOpacity={0.8}
            onPress={() => router.navigate("/settings/profile")}
          >
            <Image
              source={{
                uri: currentUser.avatar || DEFAULT_AVATAR_URL,
              }}
              style={styles.avatar}
            />
          </TouchableOpacity>
          <View style={styles.profileText}>
            <Text style={[styles.username, { color: colors.text.primary }]}>
              {currentUser.nickname}
            </Text>
            <Text style={[styles.userId, { color: colors.text.secondary }]}>
              {currentUser.uuid}
            </Text>
          </View>
          <View style={styles.actionsContainer}>
            <TouchableOpacity
              style={styles.actionButton}
              onPress={() => setQrCodeVisible(true)}
            >
              <AntDesign name="qrcode" size={24} color={colors.text.primary} />
            </TouchableOpacity>
          </View>
        </View>
      </View>
      <SettingsList />

      {/* 个人二维码模态框 */}
      <QRCodeModal
        visible={qrCodeVisible}
        onClose={() => setQrCodeVisible(false)}
        type="personal"
        id={currentUser.uuid}
        name={currentUser.nickname}
        avatar={currentUser.avatar}
        onShare={handleShareQRCode}
      />
    </View>
  );
}
